import React,{PropTypes} from "react";
import classnames from 'classnames';

import {DatePicker,Tooltip,Table,Checkbox } from 'antd';
import {type,omit} from 'fly';


import Title from './View_Title';

export default class Process extends React.Component {
    static defaultProps = {
        prefixCls : "create_proofing-process",
        mappingTable:[
            "FIT样",
            "缝制样",
            "展示样",
            "尺码样",
            "产前样",
            "版权样",
            "大货样",
            "测试样",
            "摄影样",
            "印花样",
            "绣花样"
        ],
    };

    static propTypes = {

    };

    static contextTypes = {
        process: PropTypes.object.isRequired,
    };

    constructor(props) {
        super(props);
        this.state = {
            activeList:[],  //选中的id数组
            topCurrentActive:null,  //当前选择的打样(用于展示动画)
        };
    };

    componentWillMount(){
        // const mappingTable = this.context.process.processList;
        // // debugger;
        // this.props.mappingTable = mappingTable;
    };

    processChunkClick = (id)=>{
        let activeList = this.state.activeList,
            isAc = true;

        for(let i = 0; i<activeList.length; i++){
            if( activeList[i].sampleId === id){ isAc = false; break;}
        }

        const ModuleChunk ={
            deliveryDate:null,
            date:null,
            sampleId:id,
        };

        if( !isAc ){
            let curId;
            activeList.forEach((item,index)=>{
                if(id === item.sampleId){
                    curId = index;
                }
            });
            this.state.activeList.splice(curId,1);
            this.setState({topCurrentActive:null});
        }else{
            this.state.activeList.push(ModuleChunk);
            this.setState({topCurrentActive:id});
        }

       activeList.sort((a,b)=> a.sampleId - b.sampleId);

       this.setState({activeList});
    };

    sizeClick = (item,size)=>{
        const {sampleId} = Object.assign({},item);
        const List = this.state.activeList;

        if(sampleId && List){
            const key = this._IdSearchKey(sampleId);

            if(type(List[key].size) !== "array"){List[key].size = [];}

            const _item = List[key];

            // 是添 是删 ?
            if(_item.size.indexOf(size) === -1){
                _item.size.push(size);
            }else{
                _item.size.splice(_item.size.indexOf(size),1);
            }

            this.setState({activeList:List})
        }
    };

    SizeChunk(item){
        const baseCls = this.props.prefixCls;

        const Modal = [ 'XS',"S","M","L","XL","XXL","XXXL"];

        const sizeTooltip = (item)=>{
            return <div>
                <span data-type="overAlarm"> 请选择要打的尺码 </span>
                <ul data-type="overSize">
                    {
                        Modal.map((size,index)=> <li className={classnames({active:item.size ? item.size.indexOf(size) !== -1 : false})}
                                        onClick={()=>{this.sizeClick(item,size)}}>
                                <span> {size} </span>
                            </li>
                        )
                    }
                </ul>
            </div>
        };

        return (<div data-type="size" ref="size">
                {
                    this.Calendar(item)
                }
                <Tooltip trigger="click"
                         overlayStyle={{width:410}}
                         overlayClassName={`${baseCls}-over-size`}
                         getTooltipContainer={()=>this.refs.size}
                         title={sizeTooltip(item)}
                >
                    {
                       !item.size || item.size.length <= 0? <a style={{color:"#fda649",textDecoration:"underline"}}> 选择打样尺码 </a> :
                           <Tooltip
                                title={item.size.join(",")}
                                getTooltipContainer={()=>this.refs.size}
                           >
                                 <span className={`${baseCls}-size-view`} title="">
                                   {item.size.join(",")}
                               </span>
                           </Tooltip>
                    }
                </Tooltip>
            </div>
        )
    };

    disabledDate(current) {
        // Can not select days before today and today
        return current && current.valueOf() < Date.now();
    };

    _IdSearchKey(id){
        const List = this.state.activeList;

        for(let i =0; i<List.length; i++){
            if(List[i].sampleId === id){
                return i;
            }
        }

        return false;
    };

    Calendar = (item)=>{
        const id = item.sampleId;

        const handleDateChange = (date,itemKey,id)=>{

              if(!id|| !date || !itemKey){ return; }

              if(!id){ new Error("Calendar not id. 参数错误") }

              const dataObj = {
                  deliveryDate:itemKey,
                  date:date,
                  sampleId:id,
              };

              const List = this.state.activeList;

              const _key = this._IdSearchKey(id);

              List[_key] = Object.assign({},List[_key],dataObj);

              this.setState({activeList:List})
        };

        return <DatePicker
              disabledDate={this.disabledDate}
              onChange={(d,s)=>{handleDateChange(d,s,id)}}
              getCalendarContainer={()=>this.refs.dateContinue || document.body}
              value={item.date}
              placeholder="交货日期"
              allowClear={false}
        />
    };

    chooseRenderItem = (item,index)=>{
        const mappingTable = this.props.mappingTable;

        switch(mappingTable[item.sampleId-1]){
            case "尺码样" : return this.SizeChunk(item);
            default : return this.Calendar(item,index);
        }
    };

    render() {
        const baseCls =  this.props.prefixCls;

        const process = Object.assign({},this.context.process);

        const props = Object.assign({},this.props);

        const {activeList,topCurrentActive} = this.state;

        return <div className={baseCls}>
            <Title title={process.title} des={process.des}/>

            <div className={`${baseCls}-basis ${baseCls}-container`} key="basis">
                <ul data-type="list">
                    {
                        props.mappingTable.map((item,index)=>{
                            const id = index+1;  //base加一
                            return  <li key={id} className={classnames({active:this._IdSearchKey(id) !== false})} aria-index={id}>
                                <i data-type="icon" onClick={(e)=>this.processChunkClick(id,index)} />
                                <span> {item} </span>
                            </li>
                        })
                    }
                </ul>
            </div>

            <div  className={`${baseCls}-choose ${baseCls}-container`} key="choose">
                <ul data-type="list">
                    {
                        activeList.map((item,index)=>{
                            //aria-index不以下标为准,描述是下标
                            return <li key={item.sampleId} aria-index={item.sampleId} data-type={topCurrentActive === item.sampleId && "new"} ref="dateContinue" className="active">
                                <i data-type="icon" />
                                <span> {props.mappingTable[item.sampleId-1]} </span>
                                {
                                    this.chooseRenderItem(item,index)
                                }
                            </li>
                        })
                    }
                </ul>
            </div>
        </div>
    }
}